<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../resources/common.js"></script>
<script src="../resources/picker-common.js"></script>
<script src="../calendar-picker/resources/calendar-picker-common.js"></script>
</head>
<body>
<input type="month" id="month0" value="2019-07">
<input type="month" id="month1" value="2019-07" step="2">
<input type="month" id="month2" value="2019-07" step="2">
<input type="month" id="month3" value="2019-07" step="10">
<input type="month" id="month4" value="2019-07" min="2019-06">
<input type="month" id="month5" value="2019-07" max="2019-08">
<script>
promise_test(() => {
  let monthElement = document.getElementById("month0");
  return openPickerWithPromise(monthElement)
  .then(() => {
    eventSender.keyDown('ArrowRight');
    eventSender.keyDown('ArrowDown');
    assert_equals(monthElement.value, "2019-12", "Using arrow keys to navigate month picker should update in-page control without pressing Enter key.");

    eventSender.keyDown('Enter');
    assert_equals(internals.pagePopupWindow, null, "Enter key should dismiss popup.");
    assert_equals(monthElement.value, "2019-12", "Updated month should remain after closing popup with Enter.");
  });
}, "Month picker: Arrow keys should allow user to chooser month");

promise_test(() => {
  let monthElement = document.getElementById("month1");
  return openPickerWithPromise(monthElement)
  .then(() => {
    eventSender.keyDown('ArrowRight');
    assert_equals(monthElement.value, "2019-09", "Right arrow key should skip over invalid date.");

    eventSender.keyDown('Enter');
    assert_equals(internals.pagePopupWindow, null, "Enter key should dismiss popup.");
  });
}, "Month picker: Picker with step should allow keyboard user to jump over invalid values -- right arrow");

promise_test(() => {
  let monthElement = document.getElementById("month2");
  return openPickerWithPromise(monthElement)
  .then(() => {
    eventSender.keyDown('ArrowUp');
    assert_equals(monthElement.value, "2019-03", "Up arrow key should skip over invalid month.");

    eventSender.keyDown('Enter');
    assert_equals(internals.pagePopupWindow, null, "Enter key should dismiss popup.");
  });
}, "Month picker: Picker with step should allow keyboard user to jump over invalid values -- up arrow");

promise_test(() => {
  let monthElement = document.getElementById("month3");
  return openPickerWithPromise(monthElement)
  .then(() => {
    eventSender.keyDown('ArrowDown');
    assert_equals(monthElement.value, "2020-05", "Arrow key should skip to next valid month even if it's in a different year.");

    eventSender.keyDown('Enter');
    assert_equals(internals.pagePopupWindow, null, "Enter key should dismiss popup.");
  });
}, "Month picker: Picker with step should allow keyboard user to skip to next month with valid month");

promise_test(() => {
  let monthElement = document.getElementById("month4");
  return openPickerWithPromise(monthElement)
  .then(() => {
    eventSender.keyDown('ArrowLeft');
    eventSender.keyDown('ArrowLeft');
    eventSender.keyDown('ArrowUp');
    assert_equals(monthElement.value, "2019-06", "Min attribute should prevent user from arrowing into invalid values");

    eventSender.keyDown('Enter');
    assert_equals(internals.pagePopupWindow, null, "Enter key should dismiss popup.");
  });
}, "Month picker: Picker with min value should prevent user from using arrow keys to get into invalid values");

promise_test(() => {
  let monthElement = document.getElementById("month5");
  return openPickerWithPromise(monthElement)
  .then(() => {
    eventSender.keyDown('ArrowDown');
    eventSender.keyDown('ArrowDown');
    eventSender.keyDown('ArrowRight');
    assert_equals(monthElement.value, "2019-08", "Max attribute should prevent user from arrowing into invalid values");

    eventSender.keyDown('Enter');
    assert_equals(internals.pagePopupWindow, null, "Enter key should dismiss popup.");
  });
}, "Month picker: Picker with max value should prevent user from using arrow keys to get into invalid values");

</script>
</body>
</html>
